<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!--jstl标签 标注-->



<!DOCTYPE HTML>
<html lang="zxx">
<head>
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content=""/>
	<script src="${pageContext.request.contextPath }/dist/js/jquery-3.3.1.min.js"></script>
	
	<%
		String userName = "";
		String userPwd = "";
		Cookie[] cookies = request.getCookies();
		if(cookies != null){
			for(Cookie c : cookies){
				if(c.getName().equals("username")){
					 userName = c.getValue();
				}else if("userpwd".equals(c.getName())){
					 userPwd = c.getValue();
				}
			}
		}
		pageContext.setAttribute("name", userName);
		pageContext.setAttribute("pwd", userPwd);
	%>
	
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<link rel="stylesheet" href="${pageContext.request.contextPath }/dist/css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="${pageContext.request.contextPath }/dist/css/fontawesome-all.css">
	<style type="text/css">
		#img{
			position:relative;
			top:10px
		}
	</style>
</head>

<body>
	<div id="bg">
		<canvas></canvas>
		<canvas></canvas>
		<canvas></canvas>
	</div>
	<h1>员工考勤系统</h1>
	<div class="sub-main-w3">
		<form id="loginForm" action="${pageContext.request.contextPath }/EmployeesController?op=login" method="post">
			<h2>请登录
				<i class="fas fa-level-down-alt"></i>
			</h2>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-user"></i>
					员工姓名:
				</label>
				<input placeholder="员工姓名" id="userName" name="userName" type="text" value="${name }" required>
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					密码:
				</label>
				<input placeholder="密码" id="userPwd" name="userPwd" type="password" value="${pwd }" required>
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock"></i>
					图片验证码:
				</label><br />
				<input placeholder="验证码" id="code" name="code" type="text" value="" required style="width: 150px;">
				<img id="img" src="${pageContext.request.contextPath }/VerifyCodeController" />&nbsp;
				<a id="changeCode"><label >换一换</label></a>
				<span style="color:red">${sessionScope.error_message }</span>
				<c:remove var="error_message" scope="session"/>
			</div>
			<div class="wthree-text">
				<ul>
					<li>
						<label class="">
						<c:choose>
							<c:when test="${cookie.checked.value != null }">
								<input type="checkbox" id="autoLogin" class="checkbox" checked="checked"  name="autoLogin">
							</c:when>
							<c:otherwise>
								<input type="checkbox" id="autoLogin" class="checkbox"  name="autoLogin">
							</c:otherwise>
						</c:choose>
							
							<span>记住密码</span>
						</label>
					</li>
				</ul>
			</div>
			<input type="submit" value="登录">
		</form>
	</div>

	<div class="footer">
		<p>Copyright &copy; 2020.员工登录考勤系统</p>
	</div>


</body>

<script src="${pageContext.request.contextPath }/dist/js/canva_moving_effect.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#changeCode").click(function(){
				$("#img").attr("src","${pageContext.request.contextPath}/VerifyCodeController?a=" + new Date().getTime());
			})
		})
		
	</script>
	
		
</html>